<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Template Name</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    function staticNav() {
        var sidenavHeight = $("#sidenav").height(); //Get height of sidenav
        var winHeight = $(window).height(); //Get height of viewport
        var browserIE6 = (navigator.userAgent.indexOf("MSIE 6")>=0) ? true : false; //Check for IE6

        if (browserIE6) { //if IE6...
            $("#sidenav").css({'position' : 'absolute'});  //reset the sidenav to be absolute
        } else { //if not IE6...
            $("#sidenav").css({'position' : 'fixed'}); //reset the sidenav to be fixed
        }

        if (sidenavHeight > winHeight) { //If sidenav is taller than viewport...
            $("#sidenav").css({'position' : 'static'}); //switch the fixed positioning to static. Say good bye to sticky nav!
        }
    }

    staticNav(); //Execute function on load

    $(window).resize(function () { //Each time the viewport is adjusted/resized, execute the function
        staticNav();
    });

});
</script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript"> 
 
$(document).ready(function() {
 
	//Set Default State of each portfolio piece
	$(".paging").show();
	$(".paging a:first").addClass("active");
		
	//Get size of images, how many there are, then determin the size of the image reel.
	var imageWidth = $(".window").width();
	var imageSum = $(".image_reel img").size();
	var imageReelWidth = imageWidth * imageSum;
	
	//Adjust the image reel to its new size
	$(".image_reel").css({'width' : imageReelWidth});
	
	//Paging + Slider Function
	rotate = function(){	
		var triggerID = $active.attr("rel") - 1; //Get number of times to slide
		var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
 
		$(".paging a").removeClass('active'); //Remove all active class
		$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
		
		//Slider Animation
		$(".image_reel").animate({ 
			left: -image_reelPosition
		}, 500 );
		
	}; 
	
	//Rotation + Timing Event
	rotateSwitch = function(){		
		play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
			$active = $('.paging a.active').next();
			if ( $active.length === 0) { //If paging reaches the end...
				$active = $('.paging a:first'); //go back to first
			}
			rotate(); //Trigger the paging and slider function
		}, 6000); //Timer speed in milliseconds (3 seconds)
	};
	
	rotateSwitch(); //Run function on launch
	
	//On Hover
	$(".image_reel a").hover(function() {
		clearInterval(play); //Stop the rotation
	}, function() {
		rotateSwitch(); //Resume rotation
	});	
	
	//On Click
	$(".paging a").click(function() {	
		$active = $(this); //Activate the clicked paging
		//Reset Timer
		clearInterval(play); //Stop the rotation
		rotate(); //Trigger rotation immediately
		rotateSwitch(); // Resume rotation
		return false; //Prevent browser jump to link anchor
	});	
	
});
</script>

</head>

<body>
<div class="container">
  <div id="sidenav"> <img src="images/logo.gif" alt="" />
    <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="aboutus.html">About Us</a></li>
            <li><a href="latest.html">Latest Collection</a></li>
            <li><a href="testimonial.html">Testimonial</a></li>
            <li><a href="contactus.html">Contact Us</a></li>
        </ul>
</div>
  <div id="content"> <img src="images/topbar.jpg" alt="" />
    <!--Content Goes Here-->
    <div id="whitebox"><div class="main_view">
    <div class="window">
        <div class="image_reel">
            <a href="#"><img src="images/image1.jpg" alt="" /></a>
            <a href="#"><img src="images/image2.jpg" alt="" /></a>
            <a href="#"><img src="images/image3.jpg" alt="" /></a>
        </div>
    </div>
    <div class="paging">
        <a href="#" rel="1">1</a>
        <a href="#" rel="2">2</a>
        <a href="#" rel="3">3</a>
        <a href="#" rel="4">4</a>
    </div>
</div>
      <div class="paddingbox"><h1>Welcome to Jewelry</h1>
        <p><span class="goldtext">Duis autem vel eum iriure dolor in hendrerit in vulputate</span></p>
        <p> Velit esse molestie consequat, vel illum dolore eu feugiat nula facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdie. doming id quod. mazim placerat facer possim assum vel eum iriure dolor in hendrerit in vulputate velit esse molestie cons. Equat, vel illum dolore eu feugiat nulla facilisis at vero autem vel eum iriure dolor. </p>
      </div>
    </div>
    <div id="footer">© Copyright Company Name. •  All Rights Reserved</div>
  </div>
</div>
<div>
</div>
</body>
</html>
